<template>
          <div class="my-tag">
           <input class="input"
            type="text"
            placeholder="输入标签"
            v-if="isShow"
            v-focus
            v-model="keyName"
            @keydown.enter="fn"
          />
          <div @dblclick="shows" class="text" v-else>{{value}}</div>
</div>
</template>

<script>
export default {
  name: 'VueModeMyTag',
  props:{
   value:{
    type:String,
    required:true
   }
  },
  data() {
    return {
      isShow:false,
      keyName:''
    };
  },
  methods:{
    fn(){
       this.isShow=false
       this.$emit('input',this.keyName)
    },
   shows(){
    this.isShow=true
    this.keyName=this.value
   }
  }
};
</script>

<style lang="less" >
.my-tag {
  cursor: pointer;
  .input {
    appearance: none;
    outline: none;
    border: 1px solid #ccc;
    width: 100px;
    height: 40px;
    box-sizing: border-box;
    padding: 10px;
    color: #666;
    &::placeholder {
      color: #666;
    }
  }
}
</style>